<template>
  <div class="content-box">
    <el-row>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">单据名称：</span>
        <span class="l-content text--info subtext"
          >{{ baseInfo?.billName }}
        </span>
      </el-col>
      <el-col
        :span="8"
        class="flex-info-wrap"
        v-if="billNum || baseInfo?.billNum"
      >
        <span class="right-align">单据编号：</span>
        <span class="l-content text--info subtext">{{
          billNum || baseInfo?.billNum
        }}</span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">单据类型：</span>
        <span class="l-content text--info subtext">{{
          formatterStatusType(baseInfo?.flowMinType)
        }}</span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">参考模板：</span>
        <div
          v-if="baseInfo?.templateAttachment"
          style="display: inline-block; vertical-align: top"
        >
          <p
            class="l-content text--info download-link subtext"
            v-for="(item, index) in baseInfo?.templateAttachment"
            :key="index"
            @click="handlePreview(item)"
          >
            <el-link :underline="false">{{ item?.name }}</el-link>
          </p>
        </div>
        <span v-else class="l-content text--info subtext">-</span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">所属项目：</span>
        <span class="l-content text--info subtext">{{
          baseInfo?.projectName
        }}</span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">所属阶段：</span>
        <span class="l-content text--info subtext"
          >{{ baseInfo?.projectStageName }}
        </span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">提交人：</span>
        <span class="l-content text--info subtext"
          >{{ baseInfo?.createUserName }}
        </span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">提交时间：</span>
        <span class="l-content text--info subtext"
          >{{ baseInfo?.createTime }}
        </span>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, watch, ref } from "vue";
import { handlePreview } from "/@/utils/file";
import { BillStatusMap } from "../../types";
const props = defineProps({
  basicInfoData: {
    type: Object,
    default: () => {}
  },
  billNum: {
    type: String,
    default: ""
  }
});

let baseInfo = ref(null);

watch(
  () => props.basicInfoData,
  newVal => {
    if (newVal) {
      baseInfo.value = newVal;
    }
  },
  {
    deep: true,
    immediate: true
  }
);

// 格式化类型
const formatterStatusType = row => {
  return row && BillStatusMap.get(row);
};
</script>

<style lang="scss" scoped>
// .divider {
//   margin-bottom: 10px;
//   // border-left: 3px solid #409eff;
//   text-indent: 8px;
// }
// .content {
//   width: 100%;
//   margin-bottom: 20px;
// }

// :deep .el-select {
//   width: 100%;
// }
// :deep .el-date-editor {
//   width: 100%;
// }
</style>
